<template>
    <div class="safework construwork">
        <div class="content">
            <div class="c-top">
                <div class="c-list">
                    <div class="c-left">
                        项目名称
                    </div>
                    <div class="c-right">
                        {{userInfo.departsir == 2?userInfo.pdeptname:dataList.projectName}}
                    </div>
                </div>
                <div class="c-list"
                     @click="showclass">
                    <div class="c-left">
                        申请单位
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        <div class="c-select">{{dataList.deptName}}</div>
                        <img src="../../../../static/images/5.png"
                             @click="showmsg">
                    </div>
                </div>
                <div class="c-list"
                     @click="showArea">
                    <div class="c-left">
                        作业区域
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        <input type="text"
                               v-if="!dataList.areaName"
                               placeholder="请选择"
                               disabled>
                        <div class="c-select"
                             v-else>{{dataList.areaName}}</div>
                        <img src="../../../../static/images/5.png"
                             @click="showmsg">
                    </div>
                </div>
                <div class="c-list"
                     style="padding:0 20px 0 0">
                    <div class="c-left">
                        作业开始日期
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        <datetime v-model="dataList.startDate"
                                  @on-change="changestart"
                                  format="YYYY-MM-DD"
                                  title='开始时间'>
                            <div class="showlisttime">
                                {{dataList.startDate}}
                                <i class="iconfont icon-jinru rightmsg"></i>
                            </div>
                        </datetime>
                    </div>
                </div>
                <div class="c-list"
                     style="padding:0 20px 0 0">
                    <div class="c-left">
                        作业结束日期
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        <!--<div class="c-select">请选择</div>
                     <img src="../../../../static/images/5.png"  @click="showmsg" >-->

                        <datetime :start-date="startDateOn"
                                  @on-change="changeend"
                                  v-model="dataList.endDate"
                                  format="YYYY-MM-DD"
                                  title='结束时间'>
                            <div class="showlisttime">
                                {{dataList.endDate}}
                                <i class="iconfont icon-jinru rightmsg"></i>
                            </div>
                        </datetime>
                    </div>
                </div>
                <div class="c-list"
                     @click="showperson">
                    <div class="c-left">
                        监护人
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="c-right">
                        <input type="text"
                               v-if="!dataList.guardian"
                               placeholder="请选择"
                               disabled>
                        <div class="c-select"
                             v-else>{{dataList.guardian}}</div>
                        <img src="../../../../static/images/5.png"
                             @click="showmsg">
                    </div>
                </div>
                <!-- <div class="c-list">
                  <div class="c-left">
                     作业楼层
                     <i class="iconfont icon-required"></i>
                  </div>
                  <div class="c-right">
                     <div class="c-select">请选择</div>
                     <img src="../../../../static/images/5.png"  @click="showmsg" >
                  </div>
              </div>-->
                <div class="c-l-l">
                    <div class="c-left"
                         style="display:inline-block">
                        作业楼层
                        <i class="iconfont icon-required"></i>
                    </div>
                    <textarea maxlength="50"
                              v-model="dataList.floor"
                              placeholder="请输入设备名称及编号（自行换行）"
                              class="textarea"></textarea>
                </div>
                <div class="c-list"
                     @click="workclick">
                    <div class="c-left">
                        作业类型
                    </div>
                    <div class="c-right">
                        <input type="text"
                               v-if="!dataList.workTypes"
                               placeholder="请选择"
                               disabled>
                        <div class="c-select"
                             v-else>{{dataList.workTypes}}</div>
                        <img src="../../../../static/images/5.png"
                             @click="showmsg">
                    </div>
                </div>
                <div class="c-list"
                     @click="nextstep">
                    <div class="c-left">
                        分部分项工程
                    </div>
                    <div class="c-right">
                        <input type="text"
                               v-if="!dataList.PlanText"
                               placeholder="请选择"
                               disabled>
                        <div class="c-select"
                             v-else>{{dataList.PlanText}}</div>
                        <img src="../../../../static/images/5.png"
                             @click="showmsg">
                    </div>
                </div>
                <div class="c-list"
                     @click="showmsure">
                    <div class="c-left">
                        防范措施
                    </div>
                    <div class="c-right">
                        <input type="text"
                               v-if="!dataList.defenceText"
                               placeholder="请选择"
                               disabled>
                        <div class="c-select"
                             v-else>{{dataList.defenceText}}</div>
                        <img src="../../../../static/images/5.png"
                             @click="showmsg">
                    </div>
                </div>

            </div>

            <div class="line"
                 v-if="ApproveInfo.length>0"></div>
            <div class="form-section"
                 v-if="ApproveInfo.length>0">
                <h3>审批信息</h3>
                <div v-for="(item,index) in ApproveInfo"
                     :key="index"
                     class="list-item">
                    <div class="form-item form-item-style2">
                        <div class="label-title">
                            <label>审批意见</label>
                        </div>
                        <div>
                            <p class="textarea">{{item.Remark}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批结论</label>
                        </div>
                        <div>
                            <p>{{item.ApproveResult}}</p>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>审批人</label>
                        </div>
                        <div>
                            <p>{{item.ApprovePersonName}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-btn">
                <div class="c-submit"
                     @click="submitbtn">提交</div>

            </div>
        </div>
        <!--获取区域-->
        <div v-transfer-dom>
            <popup v-model="areaValue"
                   width="100%">
                <div class="position-horizontal-demo"
                     v-for="(item,index) in areaList"
                     :key="index"
                     @click="selectArea(item)">
                    <span class="vux-close">
                        {{item.name}}
                    </span>
                </div>
            </popup>
        </div>

        <!--获取班组-->
        <div v-transfer-dom>
            <popup v-model="classValue"
                   width="100%">
                <!--<div class="position-horizontal-demo" v-for="(item,index) in classList" @click="selectClass(item)">
            <span class="vux-close">
                {{item.deptName}}
            </span>
          </div>-->

                <div class="newlist">
                    <lookcompany></lookcompany>
                </div>
            </popup>
        </div>

        <!--获取责任人-->
        <div v-transfer-dom>
            <popup v-model="personValue"
                   width="100%">
                <div class="position-horizontal-demo"
                     v-for="(item,index) in personList"
                     :key="index"
                     @click="selectPerson(item)">
                    <span class="vux-close">
                        {{item.realName}}
                    </span>
                </div>
            </popup>
        </div>

        <!--获取作业类型-->
        <div v-transfer-dom>
            <popup v-model="workValue"
                   width="100%">
                <div class="newlistdemo"
                     @click="toclose">
                    确认
                </div>
                <div class="vux-popup-dialog-content">
                    <div class="position-horizontal-demo"
                         v-for="(item,index) in workType"
                         :key="index"
                         @click="selectwork(item,index)">
                        <span class="vux-close">
                            {{item}}
                        </span>
                        <x-icon type="ios-checkmark-empty"
                                size="30"
                                v-if="workcheck[index]"></x-icon>
                    </div>
                </div>
            </popup>
        </div>

        <!--分部分项工程-->
        <div v-transfer-dom>
            <popup v-model="nextstepValue"
                   width="100%">
                <div class="newlistdemo"
                     @click="toclosenext">
                    确认
                </div>
                <div class="vux-popup-dialog-content">
                    <div class="position-horizontal-demo"
                         v-for="(item,index) in projectList"
                         :key="index"
                         @click="nextstepSelect(item,index)">
                        <span class="vux-close">
                            {{item.DeptName}}
                        </span>
                        <x-icon type="ios-checkmark-empty"
                                size="30"
                                v-if="nextstepcheck[index]"></x-icon>
                    </div>
                </div>
            </popup>
        </div>

        <!--1防范措施-->
        <div v-transfer-dom>
            <popup v-model="mesureValue"
                   width="100%">
                <div class="newlistdemo"
                     @click="toclosemesure">
                    确认
                </div>
                <div class="position-horizontal-demo"
                     v-for="(item,index) in mesureList"
                     :key="index"
                     @click="mesureSelect(item,index)">
                    <span class="vux-close">
                        {{item.DeptName}}
                    </span>
                    <x-icon type="ios-checkmark-empty"
                            size="30"
                            v-if="mesurecheck[index]"></x-icon>
                </div>
            </popup>
        </div>
        <myMenu></myMenu>

    </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'
import myMenu from '@/commonComponents/menu'
import mixin from '../commonmixin.js'
import lookcompany from '../weightwork/lookcompany'
const getDate = () => {
    var date = new Date()
    var seperator1 = '-'
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var strDate = date.getDate()
    if (month >= 1 && month <= 9) {
        month = '0' + month
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate
    return currentdate
}

const endDate = () => {
    var date = new Date()
    var seperator1 = '-'
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var strDate = date.getDate()
    if (month >= 1 && month <= 9) {
        month = '0' + month
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate
    return currentdate
}
export default {
    name: 'App',
    directives: {
        TransferDom
    },
    mixins: [mixin],
    data () {
        return {
            userInfo: '',
            options1: ['A单位'],
            options2: ['安全类'],
            active: 1,
            showflag: false,
            dataList: {
                // id:"",//	String	否	现场危险作业ID
                deptName: '', //	String	否	申请单位名称
                deptId: '', //	String	否	申请单位ID
                startDate: getDate(), //	String	否	申请拆除日期
                endDate: endDate(), //	String	否	计划完工时间
                personId: '', //	String	否	申请人ID
                personName: '', //	String	否	申请人名称
                areaId: '', //	String	否	作业区域ID
                areaName: '', //	String	否	作业区域名称
                guardian: '', //	String	否	监护人
                floor: '', //	String	否	作业楼层
                workTypes: '', //	String	否	作业类型*（多选，","分隔）
                PlanText: '', //	String	否	分部分项工程名称（可多选，","分隔）
                defenceText: '' //	String	否	防范措施（可多选，","分隔）
                // canEdit:"",//	boolean	否	本人是否可以修改（审批，重新提交）
                // checkRecord:"",//	ApproveRecords实体	否	审核记录*
                // MonitoringPath:"",//	String	否	监控图片
                // MonitoringPeople:"",//	String	否	监控人员
                // MonitoringRemark:"",//	String	否	监控意见
            },

            startDateOn: getDate(),
            personList: [],
            personValue: false,

            workType: ['临边作业', '高处作业', '悬空作业', '带点作业', '其他'],
            workcheck: [],
            workValue: false,

            projectList: [],
            nextstepcheck: [],
            nextstepValue: false,

            mesureList: [],
            mesurecheck: [],
            mesureValue: false,
            addflag: true,
            ApproveInfo: []
        }
    },
    components: {
        TransferDom, Popup, lookcompany, myMenu
    },
    computed: {
    },
    watch: {
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.dataList = Object.assign({}, this.dataList, {
            projectName: this.userInfo.deptname,
            projectId: this.userInfo.deptid,
            personName: this.userInfo.username,
            personId: this.userInfo.userid,
            deptName: this.userInfo.deptname,
            deptId: this.userInfo.deptid
        })
        // this.userInfo = JSON.parse(localStorage.userInfo)
        // this.userId = this.userInfo.userid;
        // this.tokenId = this.userInfo.tokenId;
        // this.projectId = this.userInfo.deptid;
        this.getArea()
        this.getMesure()
        this.getprojectList()
        this.getPerson()
        if (this.$route.query.id) {
            this.getdetail()
        }
    },
    methods: {

        getMesure () {
            let param = {
                'allowPaging': true,
                'business': 'GetSiteDangerProtections',
                'data': {
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    this.mesureList = res.data.data
                }
            )
        },
        getprojectList () {
            let param = {
                'allowPaging': true,
                'business': 'GetSiteDangerProjectName',
                'data': {
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    this.projectList = res.data.data
                }
            )
        },
        getPerson () {
            let param = {
                'allowPaging': true,
                'business': 'GetDivderPeopleList',
                'data': {
                    'departId': this.userInfo.deptid
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    this.personList = res.data.data
                }
            )
        },
        changestart (val) {
            this.dataList.startDate = val
            let x = new Date(val).getTime() - new Date(this.showsearch.endDate).getTime()
            if (x > 0) {
                this.showsearch.endDate = val
            }
            this.startDateOn = val

            this.$forceUpdate()
        },
        changeend (val) {
            this.dataList.endDate = val
            this.$forceUpdate()
        },
        selectArea (item) {
            this.dataList.areaName = item.name
            this.dataList.areaId = item.id
            this.areaValue = false
        },
        showperson () {
            this.personValue = true
        },
        selectPerson (item) {
            this.dataList.guardian = item.realName
            this.dataList.PersonLiableid = item.memberId
            this.personValue = false
        },
        selectwork (items, index) {
            console.log(index)
            this.workcheck[index] = !this.workcheck[index]
            let typeNamelist = []
            let typeLists = []
            this.workcheck.forEach(
                (item, index1) => {
                    if (item) {
                        typeNamelist.push(this.workType[index1])
                        // typeLists.push(this.personList[index1].memberId);
                    }
                }
            )
            this.dataList.workTypes = typeNamelist.join(',')
            // this.dataList.SignalSiSuogongid =  typeNamelist.join(",")
            this.$forceUpdate()
        },
        workclick () {
            this.workValue = true
        },
        toclose () {
            this.workValue = false
        },
        nextstep () {
            this.nextstepValue = true
        },
        nextstepSelect (items, index) {
            console.log(index)
            this.nextstepcheck[index] = !this.nextstepcheck[index]
            let typeNamelist = []
            let typeLists = []
            this.nextstepcheck.forEach(
                (item, index1) => {
                    if (item) {
                        typeNamelist.push(this.projectList[index1].DeptName)
                        // typeLists.push(this.personList[index1].memberId);
                    }
                }
            )
            this.dataList.PlanText = typeNamelist.join(',')
            // this.dataList.SignalSiSuogongid =  typeNamelist.join(",")
            this.$forceUpdate()
        },
        toclosenext () {
            this.nextstepValue = false
        },
        showmsure () {
            this.mesureValue = true
        },
        toclosemesure () {
            this.mesureValue = false
        },
        mesureSelect (items, index) {
            console.log(index)
            this.mesurecheck[index] = !this.mesurecheck[index]
            let typeNamelist = []
            let typeLists = []
            this.mesurecheck.forEach(
                (item, index1) => {
                    if (item) {
                        typeNamelist.push(this.mesureList[index1].DeptName)
                        // typeLists.push(this.personList[index1].memberId);
                    }
                }
            )
            this.dataList.defenceText = typeNamelist.join(',')
            // this.dataList.SignalSiSuogongid =  typeNamelist.join(",")
            this.$forceUpdate()
        },
        submitbtn () {
            if (!this.dataList.deptName) {
                this.$vux.toast.text('请选择申请单位')
                return false
            }
            if (!this.dataList.areaName) {
                this.$vux.toast.text('请选择作业区域')
                return false
            }
            if (!this.dataList.floor) {
                this.$vux.toast.text('请输入作业楼层')
                return false
            }
            if (!this.dataList.guardian) {
                this.$vux.toast.text('请选择监护人')
                return false
            }
            // if(!this.dataList.PlanText){
            //    this.$vux.toast.text('请选择分部分项工程');
            //    return false;
            // }
            // if(!this.dataList.defenceText){
            //    this.$vux.toast.text('请选择防范措施');
            //    return false;
            // }
            let sendmethod = 'send'
            // if(this.$route.query.id){
            //     sendmethod = "modify";
            // }
            if (!this.addflag) {
                return false
            }
            this.addflag = false
            this.$vux.loading.show({
                text: '正在提交中...'
            })
            let param = {
                'allowPaging': true,
                'business': 'SetSiteDangerJob',
                'method': sendmethod,
                'data': this.dataList,

                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        // this.$router.push('/workrisk')
                        this.$router.go(-1)
                    } else {
                        this.addflag = true
                    }
                }
            ).catch(
                () => {
                    this.addflag = true
                }
            )
        },
        getdetail () {
            let param = {
                'allowPaging': true,
                'business': 'GetSiteDangerJob',
                'data': {
                    'id': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    let newarr = res.data.data
                    this.dataList = {
                        id: newarr.Id,
                        projectName: newarr.ProjectName, //	String	否	项目名称
                        projectId: newarr.ProjectId,
                        deptName: newarr.DeptName, //	String	否	申请单位名称
                        deptId: newarr.DeptId, //	String	否	申请单位ID
                        startDate: newarr.StartDate.substring(0, 10), //	String	否	申请拆除日期
                        endDate: newarr.EndDate.substring(0, 10), //	String	否	计划完工时间
                        personId: newarr.PersonId, //	String	否	申请人ID
                        personName: newarr.PersonName, //	String	否	申请人名称
                        areaId: newarr.AreaId, //	String	否	作业区域ID
                        areaName: newarr.AreaName, //	String	否	作业区域名称
                        guardian: newarr.Guardian, //	String	否	监护人
                        floor: newarr.Floor, //	String	否	作业楼层
                        workTypes: newarr.WorkTypes, //	String	否	作业类型*（多选，","分隔）
                        PlanText: newarr.PlanText, //	String	否	分部分项工程名称（可多选，","分隔）
                        defenceText: newarr.DefenceText
                    }
                    this.ApproveInfo = res.data.data.ApproveInfo
                }
            )
        }
    }
}
</script>

<style scoped lang="less">
.safework {
    background-color: #ebeef3;
    height: 100%;
}
.safework .iconfont {
    margin-right: 0;
    color: #999;
}
.safework .icon-required {
    color: red;
}
.content {
    background-color: #fff;
}
.c-top {
    background-color: #fff;
    padding-left: 20px;
}
.c-list {
    padding: 0 20px 0 0;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efeff4;
    align-items: center;
}
.c-left {
    color: #333;
    font-size: 14px;
    position: relative;
}
.c-left > i {
    position: absolute;
    top: -5px;
    right: -18px;
}
.c-right {
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.c-right input {
    text-align: right;
    background: #fff;
}
.c-select {
    margin-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
    text-align: right;
    font-size: 14px;
    color: #999;
}
.c-btn {
    height: 113px;
    padding-top: 32px;
}
.c-submit {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    border-radius: 20px;
    background-color: #2269ff;
    margin: 0 auto;
}
.position-horizontal-demo {
    height: 55px;
    line-height: 55px;
    padding-left: 20px;
    font-size: 16px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.showlisttime {
    height: 40px;
    line-height: 40px;
    width: 200px;
    text-align: right;
    font-size: 14px;
    color: #999;
}
.c-l-l {
    height: 95px;
    padding-top: 28px;
    padding-right: 20px;
    border-bottom: 1px solid #ebeef3;
}
.textarea {
    width: 100%;
    border: 0;
    outline: none;
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}
.newlistdemo {
    height: 50px;
    line-height: 50px;
    //  position:absolute;
    //  top:0;
    //  left:0;
    width: 100%;
    text-align: right;
    padding-right: 20px;
    background: #f4f4f4;
}
.line {
    border-bottom: 10px solid #ebeef2;
}
</style>
<style>
.construwork .weui-cell {
    padding-right: 0;
}
</style>
